<template>
	<view class="page flexC-FS-C">
		<view class="modules flexC-FS-C">
			<scroll-view class="swiper-scroll-view" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="white"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore" @scrolltolower="scrolltolower">
				<template v-if="visitorUserList.length">
					<view class="order-item flexC-FS-SB" v-for="(item, el) in visitorUserList" :key="el">
						<view class="msg flexR-FS-FS" @click="toShowDetail(item)">
							<view class="left">
								<img class="faces" :src="imagesYqgjUrl + 'head.png'"></img>
							</view>
							<view class="right">
								<view class="width100 flexC-FS-FS">
									<view class="msg-content flexR-FS-C mb10">
										<text class="row3 txt20">{{ item.visitorName }}</text>
									</view>
									<view class="msg-content flexR-FS-C mb10">
										<text class="msg-content-title color-888">访问时间：</text>
										<text class="row3">{{ item.startTime }}</text>
									</view>
									<view class="msg-content flexR-FS-C mb10">
										<text class="msg-content-title color-888">结束时间：</text>
										<text class="row3">{{ item.endTime }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
						:nomore-text="nomoreText"></u-loadmore>
				</template>
				<template v-else>
					<view class="box100 flexC-Cen">
						<u-empty text="暂无申请纪录,去邀请~" mode="data" :icon="imagesYqgjUrl + 'empty.png'" width="400rpx"
							height="300rpx">
						</u-empty>
					</view>
				</template>
			</scroll-view>
		</view>

		<view class="flexC-FS-C visitorbox">
			<view class="btn flexC-Cen" @click="addVisitor">去邀请</view>
		</view>

		<tabbar />
	</view>
</template>

<script>
	import config from '@/configs/index.js'

	export default {
		data() {
			return {
				imagesYqgjUrl: config.IMAGES_URL_YQGJ + 'visitor/',
				triggered: false,
				_freshing: true,
				curPage: 0,
				maxLen: 5,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '滑动加载更多',
				nomoreText: '没有更多了',
				visitorUserList: [],
			};
		},

		onShow() {
			this.startInit();
			const list = uni.getStorageSync("visitorUserList")
			if (list) {
				this.visitorUserList = list
			} else {
				const list2 = [{
					visitorName: "张扬",
					startTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
					endTime: "08:00—12:00",
				}, {
					visitorName: "范晓云",
					startTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
					endTime: "13:00—16:00",
				}]

				uni.setStorageSync("visitorUserList", list2)
				this.visitorUserList = list2
			}
			console.log(list);
		},

		methods: {
			startInit() {
				this.getvisitorUserList();
			},

			scrolltolower(e) {
				this.getvisitorUserList('loadMore');
			},

			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				if (!this.triggered) this.triggered = true;
				setTimeout(() => {
					this.getvisitorUserList();
				}, 100);
			},

			onRestore() {
				//this.triggered = 'restore'; // 需要重置
			},

			getvisitorUserList(act) {
				let params = {
					OnlyWaitDeal: true,
					MaxResultCount: this.maxLen
				};
				if (act && act == 'loadMore') {
					this.curPage = this.curPage + 1;
					params.SkipCount = this.curPage * this.maxLen;
				} else {
					params.SkipCount = this.curPage = 0;
				}
				this.triggered = false;
				this._freshing = false;
			},

			// 去邀请
			addVisitor() {
				uni.navigateTo({
					url: '/sub-visitor/add'
				});
			},

			toShowDetail(item) {
				uni.navigateTo({
					url: `/sub-visitor/planDetail`,
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.modules {
			width: 100%;
			padding: 0 34rpx 0px 34rpx;
			height: calc(100% - 240rpx);
			box-sizing: border-box;
			padding-bottom: 20rpx;
			margin-top: 34rpx;

			.swiper-scroll-view {
				height: 100%;

				.order-item {
					width: 100%;
					margin: 0 0 30rpx;
					background-color: #ffffff;
					padding: 20rpx;
					border-radius: 6rpx;
					box-sizing: border-box;

					.msg {
						width: 100%;

						.left {
							margin-top: 14rpx;

							.faces {
								width: 120rpx;
								height: 120rpx;
								border-radius: 50%;
							}
						}

						.right {
							margin-left: 30rpx;
							margin-top: 30rpx;

							.txt20 {
								font-size: 38rpx;
							}
						}

						.msg-content {
							width: 100%;
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;

							.msg-content-title {
								min-width: 150rpx;
							}

							.msg-content-val {
								width: calc(100% - 150rpx);
							}
						}
					}
				}
			}
		}

		.btn {
			width: 82%;
			height: 72rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			color: #ffffff;
			background-color: rgba(65, 174, 104, 1);
			font-size: 32rpx;
			margin-top: 14rpx;
		}

		.visitorbox {
			width: 100%;
			background-color: #ffffff;
			width: 100%;
			height: 100rpx;
		}
	}

	.animatedTime {
		animation-duration: 300ms;
	}
</style>